<template>
    <div class="app-container" ref="appContainer">
        <div class="header">
            <el-form-item label="请输入机器人id">
                <el-input v-model="inputSearch.searchId" :placeholder="`请输入机器人id`" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onclickSearch">搜索</el-button>
            </el-form-item>
        </div>
        <div class="header">
            <div class="search">
                <el-button type="primary" @click="onClickCreate">创建机器人</el-button>
            </div>
        </div>

        <!-- ------------表格--------------->
        <div class="table">
            <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
                <el-table-column label="机器人id" align="center" prop="id" width="100px">
                </el-table-column>
                <el-table-column label="uid" align="center" prop="uid" width="100px">
                </el-table-column>
                <el-table-column label="联盟" align="center" prop="groupid" width="100px">
                </el-table-column>
                <el-table-column label="昵称" align="center" prop="nick" width="100px">
                </el-table-column>
                <el-table-column label="头像" width="90px" align="center">
                    <template #default="scope">
                        <el-avatar :size="80" :src="scope.row.face">
                            <img src="@/assets/image/userlogo.png" />
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column label="桌子" align="center" prop="tableid" width="100px">
                </el-table-column>
                <el-table-column label="状态" align="center" prop="free_desc" width="100px">
                </el-table-column>
                <el-table-column label="到期时间" align="center" prop="dtime" width="300px">
                </el-table-column>

                <el-table-column label="操作" align="center" width="300px">
                    <template #default="scope">
                        <el-button type="success" @click="onClickFix(scope.row)">修改</el-button>
                        <el-button type="success" @click="onClickApply(scope.row)"
                            v-if="isShowApply(scope.row)">应用</el-button>
                        <!-- <el-button type="success" @click="onClickApply(scope.row)">应用</el-button> -->
                        <el-button type="success" @click="onClickLeave(scope.row)"
                            v-if="isShowLeave(scope.row)">离开</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <!-- ------------分页--------------->
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
          @pagination="getList" /> -->

        <!-- ------------分页--------------->
        <div class="pagination">
            <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
                @current-change="getList" />
        </div>

        <el-dialog v-model="dialogVisible" title="机器人" width="90%">
            <el-form :model="Robot_Model">
                <el-form-item label="机器人id" v-if="!Robot_Model.isCreate">
                    <el-input v-model="Robot_Model.robotid" placeholder="请输入机器人id" clearable disabled />
                </el-form-item>
                <el-form-item label="呢称">
                    <el-input v-model="Robot_Model.nick" placeholder="请输入呢称" clearable />
                </el-form-item>
                <el-form-item label="头像">
                    <el-input v-model="Robot_Model.face" />
                </el-form-item>
                <el-form-item label="联盟id">
                    <el-input v-model="Robot_Model.groupid" />
                </el-form-item>
                <el-form-item label="最小下注">
                    <el-input v-model="Robot_Model.min" />
                </el-form-item>
                <el-form-item label="最大下注">
                    <el-input v-model="Robot_Model.max" />
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-date-picker v-model="Robot_Model.time" type="datetime" placeholder="到期时间">
                    </el-date-picker>
                </el-form-item>

            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <div style="display: flex; justify-content: center;">
                        <el-button type="primary" @click="dialogVisible = false">
                            取消
                        </el-button>
                        <el-button type="primary" @click="onClickRobot_sure()">
                            确定
                        </el-button>
                    </div>
                </span>
            </template>

        </el-dialog>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Base64 } from 'js-base64'
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, de, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { GameConfig } from '@/config/GameConfig'
import { DateUtil } from '@/engine/util/DateUtil'
import { Base64Helper } from '@/engine/util/Base64Helper'
import { GroupInfo } from '@/store/model/GroupInfo'
import { BetModel } from '@/store/model/BetModel'
import { data } from 'dom7'
import { Config } from '@/config/Config'
import { pick } from 'lodash'
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
    searchId: "",
    searchDate: new Date()
})

//列表查询选项
const listQuery = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
})

let list = reactive([
    {

    }
])
let pageObj = reactive({
    total: 0
})

const dialogVisible = ref(false)
const detailList = reactive([
    {

    }
])

let Robot_Model = reactive({
    isCreate: true,
    robotid: "",
    nick: "",
    face: Config.getHttpHeadUrl()+ "1.jpg",
    groupid: "1",
    time: new Date(),
    min: "1",
    max: "1000",
})



onMounted(() => {

    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})

const onClickCreate = () => {
    Robot_Model.isCreate = true
    Robot_Model.time = new Date(DateUtil.now() + Config.One_Day * 1)
    dialogVisible.value = true
}


const onClickRobot_sure = () => {
    Logger.log("onClickRobot_sure", Robot_Model)
    dialogVisible.value = false
    if (Robot_Model.nick == "") {
        UIHelper.showMsg("请输入呢称")
        return;
    } else if (Robot_Model.face == "") {
        UIHelper.showMsg("请输入头像网址")
        return;
    }
    let groupid: number = parseInt(Robot_Model.groupid)
    if (isNaN(groupid)) {
        UIHelper.showMsg("请输入头像网址")
        return;
    }
    let robotid: number = parseInt(Robot_Model.robotid)
    if (Robot_Model.isCreate) {
        robotid = 0
    }
    let time: number = Math.floor(Robot_Model.time.getTime() / 1000)
    let min: number = parseInt(Robot_Model.min)
    let max: number = parseInt(Robot_Model.max)
    if (isNaN(min)) {
        UIHelper.showMsg("请输入最小值")
        return;
    }
    if (isNaN(max)) {
        UIHelper.showMsg("请输入最大值")
        return;
    }
    HttpClient.robot_create(groupid, Robot_Model.nick, Robot_Model.face, time, robotid, min, max, () => {
        getList()
    })
}


const onclickSearch = () => {
    Logger.log('onclickSearch!')
    let id: number = parseInt(inputSearch.searchId);
    if (isNaN(id)) {
        id = 0
    }
    HttpClient.robot_list((data: object) => {
        loading.value = false
        let list: Array<object> = data["data"]
        formatDataList(list, id)
    })

}

const handleSizeChange = (val: number) => {
    listQuery.pagesize = val
    getList()
}

const formatDataList = (dataList: Array<object>, id: number) => {
    list.splice(0)
    for (let i = 0; i < dataList.length; i++) {
        let data = {
            "dtime": DateUtil.formatDateStr(dataList[i]["dtime"] * 1000),
            "time": dataList[i]["dtime"] * 1000,
            "uid": dataList[i]["uid"],
            "face": decodeURIComponent(dataList[i]["face"]),
            "free": dataList[i]["free"],
            "groupid": dataList[i]["groupid"],
            "id": dataList[i]["id"],
            "nick": Base64.decode(dataList[i]["nick"]),
            "tableid": dataList[i]["tableid"],
        }
        if (data["free"] == 1) {
            data["free_desc"] = "空闲"
        } else {
            data["free_desc"] = "工作"
        }
        if (id == data["id"] || id == 0) {
            list.push(data)
        }
    }
    Logger.log("formatDataList", list)
}

const onClickFix = (row) => {
    Logger.log("onClickFix", row)
    Robot_Model.face = row.face;
    Robot_Model.groupid = row.groupid
    Robot_Model.isCreate = false
    Robot_Model.nick = row.nick
    Robot_Model.time = new Date(row["time"])
    Robot_Model.robotid = row["id"]
    dialogVisible.value = true
}

const getList = () => {
    loading.value = true;
    onclickSearch()

}

const isShowApply = (row) => {
    if (row["free"] == 1) {
        return true
    }
}

const isShowLeave = (row) => {
    if (row["free"] != 1) {
        return true
    }
}

const onClickApply = (row) => {
    if (row["free"] == 1) {
        HttpClient.robot_apply(row["id"], row["nick"], row["groupid"], () => {
            getList()
        })
    }
}

const onClickLeave = (row) => {
    HttpClient.robot_leave(row["id"],row["nick"], row["groupid"], () => {
        getList()
    })
}



const onClickDetail = (row) => {
    detailList.splice(0)
    let rowDetailList = row["detail"]
    Logger.log("onClickDetail", rowDetailList)
    dialogVisible.value = true
    for (let i = 0; i < rowDetailList.length; i++) {
        let cid: number = rowDetailList[i]["cid"]
        let list: Array<BetModel> = BetModel.json2ModelList(rowDetailList[i]["betdetail"])
        let data = {
            "ju": rowDetailList[i]["ju"],
            "cid": cid,
            "uid": rowDetailList[i]["uid"],
            "betdetail": list,
            "winlost": rowDetailList[i]["winlost"],
        }
        let num1 = (cid - 1) * 6 + rowDetailList[i]["res1"] - 1
        let num2 = (cid - 1) * 6 + rowDetailList[i]["res2"] - 1
        data["res1"] = "/yuxiaxie/animal" + num1 + ".png"
        data["res2"] = "/yuxiaxie/animal" + num2 + ".png"
        detailList[i] = data
    }

}





</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      